<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <block name="title">
        <title>{$video.title} - {:C('WEB_SITE_TITLE')}</title>
    </block>
    <meta name="keywords" content="{:C('WEB_SITE_KEYWORD')}">
    <meta name="description" content="{:C('WEB_SITE_DESCRIPTION')}">
    <link rel="shortcut icon" href="__PUBLIC__/favicon.ico">

    <script type="text/javascript" src="__PUBLIC__/Home/player/match/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/ui3/js/lib/knockout-2.3.0.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/player/match/js/swiper.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/ui3/js/jwplayer/jwplayer.js?v=1.0"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/player/match/js/match_pc.js?v=1.0.3"></script>
    <link rel="stylesheet" href="__PUBLIC__/Home/player/match/css/swiper.min.css"/>
    <link rel="stylesheet" href="__PUBLIC__/Home/player/match/css/explore.css?v=1.0.2">
    <script type="text/javascript">
        {:C('GLOBAL_BDHM')}
    </script>
    <script type="text/javascript">
        window._COMMON = {
            PUBLIC : "__PUBLIC__",
        };
        function dataInit() {
            var detailUrl = "{:U('api/match/detailNew', ['race_id' => $video['id'], 'appid' => $appid])}";
            $.get(detailUrl, function(data, textStatus, xhr) {
                if (data.code == 200) {
                    viewModel.videoList(getVideoList(data.data.videos));

                    swiper = new Swiper('.swiper-container', {
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                        slidesPerView: 3,
                        paginationClickable: true,
                        spaceBetween: 5
                    });
                    var listWidth=$(".video-box").width();
                    $(".video-box").height(listWidth*9/16);

                    initPlayer();
                }
            });
            var recommendUrl = "{:U('VideoPlay/recommend', ['game_id' => $video['game_id']])}";
            $.get(recommendUrl, function(data) {
                if (data.state == 0) {
                    var list = [];
                    $.each(data.data, function(index, el) {
                        var video = el;
                        video.videoLink = "/video-"+el.id;
                        list.push(video);
                    });
                    viewModel.recommend(list);
                }
            });

            playIndex = 0;
        }
        function initPlayer() {
            jwplayer("mod_player").setup({
                flashplayer: _COMMON.PUBLIC+"/Home/ui3/js/jwplayer/jwplayer.flash.swf",
                image: "{$video['thumb']}",
                // file: viewModel.videoList()[0].uri,
                sources : viewModel.videoList()[0].sources,
                controlbar: "over",  //控制条位置
                screencolor: "#fff",   //播放器颜色
                stretching: "fill",    //画面自适应
                repeat:false,       //重复播放
                autostart:false,         //自动播放
                events:{
                    onComplete: function(e){ 
                        playNext();
                    },
                },
                width: "100%",
                aspectratio: "16:9",
            });
        }
    </script>
</head>
<body>
<!--赛事播放视频--> 
<div>
    <!--比赛精彩视频-->
    <div class="main-box relative">
        <div class="video-box relative">
            <div id="mod_player"></div>
            <!--视频播放完成弹窗S-->
            <!-- ko if:recommendShow() -->
            <div id="myPopup">
                <div class="related-videos">
                    <h1><em>热门视频</em></h1>
                    <ul data-bind="foreach:recommend">
                        <li>
                            <a href="" data-bind="attr:{'href':videoLink}" target="_blank">
                                <div class="related-video-img">
                                    <img src="" data-bind="attr:{'src':thumb}"/>
                                    <span class="related-video-name" data-bind="text:title"></span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="row-right relative">
                    <h1>下载66Play APP<br>精彩不错过</h1>
                    <p><img src="__PUBLIC__/Home/player/match/images/erweima.png"/></p>
                    <span class="replay" onclick="replay()"><img src="__PUBLIC__/Home/player/match/images/replay.png"/>重播</span>
                </div>
            </div>
            <div class="popbg"></div>
            <!-- /ko -->
            <!--视频播放完成弹窗E-->
        </div>
        <!-- ko if:viewModel.videoList().length > 0 -->
        <div class="box-right">
            <!--图文-->
            <div class="swiper-container">
                <div class="swiper-wrapper" data-bind="foreach:videoList">
                    <div class="swiper-slide" data-slide="" data-bind="attr:{'data-slide':index}, click:play, css:{'swiper-active':is_current}">
                        <div class="item-video" title="" data-bind="attr:{'title':title}">
                            <img src="" alt="" data-bind="attr:{'src':thumb, 'alt':title}"/>
                            <span class="item-message">
                                <em data-bind="text:time_point"></em>
                                <!-- ko text:title --><!-- /ko -->
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <!-- /ko -->
    </div>
</div>
</body>
</html>